<template>
  <div class="login_face">
    <div class="login_box">

      <div class="img_box">XX办公管理系统</div>
      <!-- 登录表单 -->
      <div class="login_msg">
        <!-- 账号输入框 -->
        <el-input v-model="username" style="width: 100%;height: 50px;" size="large" placeholder="请输入账号"
          :prefix-icon="UserFilled" />

        <!-- 密码输入框 -->
        <el-input v-model="password" style="width: 100%;height: 50px; margin-top: 2rem;" size="large" placeholder="请输入密码"
          :prefix-icon="Lock" type="password" show-password />

        <!-- 登录按钮 -->
		<el-button id="btn" type="primary" style="width: 100%; margin-top: 2rem;" @click="navigateToSystem">Login</el-button>      </div>

    </div>
  </div>
</template>

<script setup>
import { Search, Lock,UserFilled } from '@element-plus/icons-vue'
import{ref}from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const username=ref('')
const password=ref('')
const navigateToSystem = () => {
  router.push('/system'); // 跳转到/system路由
};




</script>

<style scoped>


.login_face {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #2D3A4B;
}

.login_box {
  width: 30%;
  padding: 2rem;
  background-color: #2D3A4B;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 200px;
}

.img_box {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 2rem;
}

.login_msg {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>